<template>
    <div class="public_main_style">
        <div class="public_main_head">
            <el-form :model="filters" inline label-width="100px" @submit.native.prevent>
                <el-row type="flex" align="middle">
                    <el-col :span="8">
                        <el-form-item label="用户Id:">
                            <el-input
                                    size="small"
                                    v-model="filters.userId"
                                    placeholder="请输入用户Id"
                                    clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="项目类型:">
                            <el-select
                                    style="width:100%"
                                    size="small"
                                    clearable
                                    v-model="filters.itemType"
                                    placeholder="请选择产品类型">
                                <el-option
                                        v-for="dict in dictArrs.item_type"
                                        :key="dict.dictId"
                                        :label="dict.label"
                                        :value="dict.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系电话:">
                            <el-input
                                    size="small"
                                    v-model="filters.mobile"
                                    placeholder="请输入联系电话"
                                    clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="状态:">
                            <el-select
                                    style="width:100%"
                                    size="small"
                                    clearable
                                    v-model="filters.status"
                                    placeholder="请选择状态">
                                <el-option label="启用" value="0"/>
                                <el-option label="禁用" value="1"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" align="middle" justify="center">
                    <el-col :span="3">
                        <el-form-item>
                            <el-button
                                    style="width:100%;"
                                    type="primary"
                                    size="small"
                                    @click="updataTableList(1)"
                                    icon="el-icon-search"
                            >搜索
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- ETable -->
        <ETable ref="table" :columns="tableHead" :getData="getTableData" @selectionChage="onSelectTableRow">
            <!--            <template slot="head">-->
            <!--                <el-button size="mini" type="primary" @click="onShowModal('userModal')">修改用户</el-button>-->
            <!--                <el-button size="mini" type="danger" @click="resetPwd">重置密码</el-button>-->
            <!--            </template>-->
            <template slot="userStatus" slot-scope="{ row }">
                <el-tag
                        size="small"
                        :type="row.status == '1' ? 'danger' : 'primary'"
                >{{ row.status | userStatus }}
                </el-tag>
            </template>
            <template slot="itemType" slot-scope="{row}">
                <span> {{ $getDict(dictArrs.item_type, row.itemType) }}</span>
            </template>
            <template slot="handle" slot-scope="{ row }">
                <el-button
                        size="mini"
                        :type="row.status == '1' ? 'primary' : 'danger'"
                        @click="onSwitchStatus(row)">{{ row.status == '1' ? '启用' : '禁用' }}</el-button>
            </template>
        </ETable>
        <!-- 修改用户弹框 -->
        <!--        <userModal ref="userModal" :userId="userId"/>-->
    </div>
</template>

<script>
    import {_getItemList} from '_api'
    import vueState from '@lib/vuexState'
    export default {
        name: "index.vue",
        mixins: [vueState],
        data() {
            return {
                filters: {
                    userId:'',
                    mobile: '',
                    itemType:'',
                    status:''
                },
                tableHead: [
                    {
                        type: 'selection'
                    },
                    {
                        prop: 'itemId',
                        label: '项目Id',
                    },
                    {
                        prop: 'userId',
                        label: '用户Id',
                    },
                    {
                        prop: 'itemName',
                        label: '项目名称',
                    },
                    {
                        prop: 'itemDetail',
                        label: '项目详情',
                    },
                    {
                        prop: 'viewCount',
                        label: '浏览次数',
                    },
                    {
                        prop: 'createTime',
                        label: '创建时间',
                    },
                    {
                        prop: 'isRecommend',
                        label: '推荐项目',
                    },
                    {
                        prop: 'itemType',
                        label: '项目类型',
                        slotName: 'itemType'
                    },
                    {
                        prop: 'mobile',
                        label: '联系电话',
                    },
                    {
                        prop: 'wechatNo',
                        label: '微信号',
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        slotName: 'userStatus',
                    },
                    {
                        label: '操作',
                        slotName: 'handle'
                    }
                ]
            }
        },
        created() {
            this.$store.dispatch('getDictlists', 'item_type')
        },
        methods: {
            //获取列表数据
            async getTableData(arg) {
                return (await _getItemList({...arg, ...this.filters}))
            },
            // 选择表格数据
            onSelectTableRow(row) {
                this.selectTableRow = row
            },
            //更新列表数据
            updataTableList(pageIndex) {
                this.$refs.table.updateTable(pageIndex)
            },
            //启用/禁用项目
            onSwitchStatus (row) {
                let text
                if (row.status == '1') {
                    text = '启用'
                } else {
                    text = '禁用'
                }
                this.$confirm(`确定要${text}该项目吗？`, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    closeOnClickModal: false
                }).then(() => {
                    this.$http.post('/cms/auth/user/item/negation', row.itemId).then(res => {
                        this.$message.success(res.msg)
                        this.updataTableList()
                    })
                })
            }
        }
    }
</script>

<style scoped>

</style>
